React Fragments: Mestrer mønstre for returnering af flere elementer

I React er komponenter designet til at rendere et enkelt rod­element. Denne grundlæggende regel præsenterer ofte en udfordring, når du skal returnere flere elementer fra en komponent. Traditionelt set tyede udviklere til at indpakke disse elementer i en <div>. Denne praksis introducerer dog unødvendige noder i DOM'en, hvilket potentielt kan påvirke ydeevnen og komplicere styling. React Fragments tilbyder en elegant løsning på dette problem, der giver dig mulighed for at gruppere en liste af børn uden at tilføje ekstra noder til DOM'en.

Hvad er React Fragments?

React Fragments er en funktion introduceret i React 16.2, der giver dig mulighed for at returnere flere elementer fra en komponent uden at introducere en ekstra DOM-node. De fungerer som usynlige wrappers, der effektivt grupperer elementer uden at påvirke HTML-strukturen. Dette resulterer i renere DOM-strukturer, forbedret ydeevne og lettere styling.

Hvorfor bruge React Fragments?

• Renere DOM: Undgår unødvendige <div> wrappers, hvilket resulterer i en renere og mere semantisk DOM-struktur.
• Forbedret ydeevne: Reducerer antallet af DOM-noder, hvilket potentielt kan føre til ydeevne­forbedringer, især i komplekse applikationer.
• Forenklet styling: Forhindrer stil­konflikter og gør det lettere at anvende styles korrekt, da du undgår ekstra wrapper-elementer.
• Gyldig HTML: Hjælper med at opretholde gyldige HTML-strukturer, især når du har med komponenter at gøre, der skal returnere flere top­niveau­elementer (f.eks. tabelrækker inden i en <tbody>).

Forskellige måder at bruge React Fragments på

React tilbyder flere måder at implementere Fragments på, hver med sin egen syntaks og brugsscenarier.

1. Den eksplicitte React.Fragment syntaks

Den mest eksplicitte måde at bruge Fragments på er ved at importere React objektet og bruge React.Fragment komponenten:

            import React from 'react';

function MyComponent() {
 return (
 <React.Fragment>
 <h1>Hej, verden!</h1>
 <p>Dette er et fragment­eksempel.</p>
 </React.Fragment>
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

Denne tilgang er klar og læsbar, hvilket gør den til et godt valg for begyndere eller når eksplicit­hed foretrækkes.

2. Den korte syntaks (<></>)

React tilbyder også en genvejs­syntaks for Fragments ved hjælp af tomme tags: <></>. Dette er en mere kortfattet og ofte foretrukken måde at bruge Fragments på:

            function MyComponent() {
 return (
 <>
 <h1>Hej, verden!</h1>
 <p>Dette er et fragment­eksempel.</p>
 </>
 );
}

            

              
                Copy
              
            
          

Denne syntaks er kortere og renere, hvilket gør den ideel til situationer, hvor kortfattethed værdsættes. Det er dog vigtigt at bemærke, at denne syntaks ikke understøtter direkte overførsel af nøgler eller attributter til Fragmentet. Hvis du har brug for at bruge nøgler eller attributter, skal du bruge den eksplicitte React.Fragment syntaks.

3. Brug af nøgler med Fragments

Når du render lister af elementer med Fragments, skal du muligvis give nøgler til hvert element. Nøgler hjælper React med at identificere, hvilke elementer der er ændret, tilføjet eller fjernet. Med den korte syntaks kan du ikke direkte overføre en `key` prop til Fragmentet. I stedet skal du bruge den eksplicitte React.Fragment syntaks:

            import React from 'react';

function MyComponent(props) {
 return (
 <ul>
 {props.items.map(item => (
 <React.Fragment key={item.id}>
 <li>{item.name}</li>
 <li>{item.description}</li>
 </React.Fragment>
 ))}
 </ul>
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

I dette eksempel render vi en liste af elementer, og hvert element er indpakket i en React.Fragment med en unik nøgle udledt af elementets ID. Dette er afgørende for, at React effektivt kan opdatere listen, når elementer ændres.

Almindelige brugsscenarier og returnerings­mønstre

Fragments er alsidige og kan bruges i forskellige scenarier til at forbedre dine React-komponenter. Her er nogle almindelige brugsscenarier og retur­mønstre:

1. Returnering af flere top­niveau­elementer

Det mest basale brugsscenarie er simpelthen at returnere flere elementer uden at tilføje en ekstra wrapper. Dette er især nyttigt, når du vil undgå at introducere unødvendige noder i DOM'en.

            function MyComponent() {
 return (
 <>
 <h1>Titel</h1>
 <p>Indhold her.</p>
 </>
 );
}

            

              
                Copy
              
            
          

2. Rendering af tabelrækker

Når du render tabelrækker (<tr>) inden i en <tbody>, er Fragments essentielle for at opretholde gyldig HTML. En <div> wrapper omkring rækkerne ville bryde tabel­strukturen.

            function MyTableBody(props) {
 return (
 <tbody>
 {props.data.map(row => (
 <React.Fragment key={row.id}>
 <tr>
 <td>{row.name}</td>
 <td>{row.value}</td>
 </tr>
 </React.Fragment>
 ))}
 </tbody>
 );
}

            

              
                Copy
              
            
          

3. Oprettelse af layout­komponenter

Fragments kan bruges til at oprette layout­komponenter, der strukturerer din applikations UI uden at introducere ekstra DOM-noder.

            function TwoColumnLayout(props) {
 return (
 <>
 <div className="column left">{props.left}</div>
 <div className="column right">{props.right}</div>
 </>
 );
}

            

              
                Copy
              
            
          

4. Betinget rendering af elementer

Fragments kan kombineres med betinget rendering for at vise forskellige elementer baseret på visse betingelser, alt sammen uden at introducere ekstra wrappers.

            function MyComponent(props) {
 return (
 <>
 {props.isLoading ? (
 <p>Indlæser...</p>
 ) : (
 <>
 <h1>Data indlæst!</h1>
 <p>Her er dataene.</p>
 </>
 )}
 </>
 );
}

            

              
                Copy
              
            
          

5. Returnering af null eller Fragments

Nogle gange vil du måske betinget rendere intet overhovedet. I stedet for at returnere en tom streng eller `undefined` (som nogle gange kan forårsage problemer), er returnering af `null` eller et tomt fragment en ren måde at håndtere dette på:

            function MyComponent(props) {
 if (!props.showContent) {
 return null; // Eller return <>;</>
 }

 return (
 <>
 <h1>Indhold</h1>
 <p>Dette indhold vises kun, når showContent er sand.</p>
 </>
 );
}

            

              
                Copy
              
            
          

Fordele ved at bruge Fragments

Fordelene ved at bruge Fragments strækker sig ud over blot renere DOM-strukturer. De bidrager til den samlede kode vedligeholdelighed, ydeevne og udvikler­oplevelse.

1. Forbedret ydeevne

Reduktion af antallet af DOM-noder oversættes direkte til forbedret ydeevne. Browsere skal gøre mindre arbejde for at rendere og opdatere DOM'en, hvilket fører til hurtigere side­indlæsningstider og glattere bruger­interaktioner. Selvom ydeevne­gevinsten kan være ubetydelig for små komponenter, kan den blive betydelig i komplekse applikationer med dybt indlejrede komponenter.

2. Nemmere styling

Undgåelse af ekstra wrapper-elementer forenkler styling. Du behøver ikke bekymre dig om utilsigtet stil­arv eller konflikter forårsaget af unødvendige <div> elementer. Dette gør det lettere at anvende styles korrekt og opretholde et konsistent visuelt udseende på tværs af din applikation.

3. Renere kode og læsbarhed

Fragments fremmer renere og mere læsbar kode. Fraværet af unødvendige wrapper-elementer gør komponent­strukturen lettere at forstå og vedligeholde. Dette er især vigtigt i store projekter, hvor kodens klarhed er afgørende for samarbejde og langsigtet vedligeholdelighed.

4. Forhindrer ugyldig HTML

Fragments hjælper med at sikre, at dine React-komponenter genererer gyldig HTML. Visse HTML-strukturer, såsom tabel­elementer, kræver specifikke for­ælder­barn­relationer. Brug af en `div`, hvor det ikke er tilladt, vil bryde HTML'en og kan føre til uventede rendering­problemer.

Praktiske eksempler: Globale applikationer

Lad os udforske, hvordan Fragments kan anvendes i scenarier, der er relevante for globale applikationer:

1. Multi­sprog­support

Forestil dig, at du bygger en hjemmeside, der understøtter flere sprog. Du skal muligvis betinget rendere forskellige versioner af en tekst­blok. Fragments kan hjælpe dig med at opnå dette uden at tilføje ekstra DOM-noder.

            import React from 'react';

function MultiLanguageText(props) {
 const { language, translations } = props;

 return (
 <>
 {translations[language] ? (
 <p>{translations[language]}</p>
 ) : (
 <p>{translations['en']}</p>
 )}
 </>
 );
}

export default MultiLanguageText;

            

              
                Copy
              
            
          

I dette eksempel renderer komponenten den passende oversættelse baseret på det valgte sprog. Hvis en oversættelse for det aktuelle sprog ikke er tilgængelig, falder den tilbage til engelsk.

2. Visning af internationale telefonnumre

Når du viser telefonnumre fra forskellige lande, skal du muligvis formatere dem forskelligt baseret på regionen. Fragments kan hjælpe dig med at gruppere telefon­nummer­komponenterne uden at introducere ekstra wrappers.

            import React from 'react';

function PhoneNumber(props) {
 const { countryCode, number } = props;

 return (
 <>
 <span>+{countryCode}</span>
 <span>{number}</span>
 </>
 );
}

export default PhoneNumber;

            

              
                Copy
              
            
          

Denne komponent viser landekoden og telefonnummeret som separate spans, hvilket giver mulighed for fleksibel styling og formatering baseret på regionen.

3. Håndtering af dato- og tidsformater

Visning af datoer og tidspunkter i forskellige formater baseret på brugerens lokale er et almindeligt krav i globale applikationer. Fragments kan hjælpe dig med at strukturere dato- og tids­komponenterne uden at tilføje ekstra DOM-noder.

            import React from 'react';
import { DateTime } from 'luxon'; // Eksempel med Luxon bibliotek

function FormattedDate(props) {
 const { date, locale } = props;
 const formattedDate = DateTime.fromISO(date).setLocale(locale).toLocaleString(DateTime.DATE_FULL);

 return (
 <>
 <time dateTime={date}>{formattedDate}</time>
 </>
 );
}

export default FormattedDate;

            

              
                Copy
              
            
          

Denne komponent formaterer datoen i henhold til det angivne lokale ved hjælp af et bibliotek som Luxon til dato­formatering. `time`-elementet giver semantisk mening til datoen.

Bedste praksis for brug af Fragments

Følg disse bedste praksisser for at maksimere fordelene ved Fragments:

• Brug den korte syntaks (<></>), når det er muligt: Dette gør din kode renere og mere kortfattet.
• Brug den eksplicitte React.Fragment syntaks, når du skal angive nøgler eller attributter: Dette er essentielt, når du render lister af elementer.
• Undgå unødvendige Fragments: Indpak ikke enkelt­elementer i Fragments. Brug dem kun, når du skal returnere flere elementer.
• Overvej at bruge Fragments i layout­komponenter: Dette kan hjælpe dig med at skabe renere og mere fleksible layouts.
• Vær opmærksom på ydeevne­implikationer: Selvom Fragments generelt forbedrer ydeevnen, kan overdreven brug af dybt indlejrede Fragments potentielt påvirke ydeevnen. Profiler din applikation for at identificere eventuelle ydeevne­flaskehalse.

Alternativer til React Fragments

Selvom Fragments generelt er den anbefalede tilgang til at returnere flere elementer i React, er der alternative tilgange, du kan støde på eller overveje i specifikke situationer:

1. Returnering af en array af elementer (mindre anbefalet)

Du kan teknisk set returnere en array af React-elementer fra en komponent. Denne tilgang har dog flere ulemper:

• Kræver nøgler: Hvert element i array'en *skal* have en unik `key` prop.
• Mindre semantisk: Det er ikke umiddelbart klart ud fra koden, at du returnerer flere elementer som en enkelt logisk enhed.
• Potentielle problemer med React opdateringer: React kan have sværere ved effektivt at opdatere DOM'en, når der arbejdes direkte med arrays af elementer.

Af disse grunde frarådes returnering af arrays generelt til fordel for Fragments.

2. Brug af en <div> wrapper (generelt frarådet)

Som nævnt tidligere er indpakning af elementer i en <div> den traditionelle (og ofte problematiske) tilgang. Den bør undgås, når det er muligt, på grund af de tidligere skitserede grunde: renere DOM, ydeevne og styling­problemer.

Konklusion

React Fragments er et kraftfuldt værktøj til at bygge renere, mere effektive og vedligeholdelses­venlige React-applikationer. Ved at give dig mulighed for at returnere flere elementer uden at introducere ekstra DOM-noder, forbedrer Fragments ydeevnen, forenkler styling og fremmer renere kode. Uanset om du bygger en lille komponent eller en kompleks applikation, bør Fragments være en del af din React-værktøjskasse. Ved at mestre de forskellige måder at bruge Fragments på og forstå deres fordele kan du skrive bedre React-kode og skabe en overlegen bruger­oplevelse.

Mens du fortsætter din React-rejse, husk at udforske forskellige retur­mønstre og vælge den tilgang, der bedst passer til dine specifikke behov. Eksperimenter med Fragments i forskellige scenarier og observer effekten på din applikations ydeevne og struktur. God kodning!